<template>
    <div>
        <el-dialog :title="state.title" width="600px" destroy-on-close v-model="state.showDialog">

            <div v-if="state.platform === 'wechat'" style="display: flex;justify-content: space-around;">
                <div style="display: flex;align-items: center;font-weight: bold;font-size: 16px;">
                    公众号
                    <vue-qrcode :value="state.content['wechatPub']" :size="100"></vue-qrcode>
                </div>
                <div style="display: flex;align-items: center;font-weight: bold;font-size: 16px;"> 小程序
                    <vue-qrcode :value="state.content['wechatMini']" alt=""></vue-qrcode>
                </div>
            </div>
            <div v-else-if="state.platform === 'ios'" style="display: flex;justify-content: center;">
                <vue-qrcode :value="state.content[state.platform]" :size="100"></vue-qrcode>
            </div>
            <div v-else-if="state.platform === 'android'">
                <el-text>您的下载应该在几秒钟后开始。如果您的下载没有自动开始，<el-link :href="state.content.android" target="_blank" type="success"
                        style="font-size: 16px;vertical-align: baseline;">请单击此处</el-link>。</el-text>
            </div>
            <div v-else-if="state.platform === 'linux'">
                <el-text>您的下载应该在几秒钟后开始。如果您的下载没有自动开始，<el-link :href="state.content.linux" target="_blank" type="success"
                        style="font-size: 16px;vertical-align: baseline;">请单击此处</el-link>。</el-text>
            </div>
            <div v-else-if="state.platform === 'windows'">
                <el-text>您的下载应该在几秒钟后开始。如果您的下载没有自动开始，<el-link :href="state.content.windows" target="_blank" type="success"
                        style="font-size: 16px;vertical-align: baseline;">请单击此处</el-link>。</el-text>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" >
import { reactive } from 'vue'

const state = reactive({
    showDialog: false,
    title: '',
    platform: '',
    content: {
        ios: "https://apps.apple.com/cn/app/id",
        wechatMini: "https://www.lpteco.com",
        wechatPub: "https://www.lpteco.com",
        android: "https://www.lpteco.com",
        linux: "https://www.lpteco.com",
        windows: "https://www.lpteco.com",
    },
})


// 打开dialog
const openDialog = (platform: string) => {
    state.platform = platform
    state.showDialog = true
    switch (platform) {
        case 'windows':
            state.title = '下载windows版本'
            break;
        case 'linux':
            state.title = '下载linux版本'
            break;
        case 'ios':
            state.title = '苹果用户客户端下载'
            break;
        case 'android':
            state.title = '安卓用户客户端下载'
            break;
        case 'wechat':
            state.title = '微信公众号 小程序'
            break;
    }
}



defineExpose({
    openDialog
})
</script>


<style scoped lang="scss">
:deep(.el-dialog__header) {
    margin: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
    text-align: center;
}

:deep(.el-dialog__footer) {
    border-top: 1px dashed rgba(0, 0, 0, .2);
}

:deep(.el-table thead) {
    color: #000;
}

.about-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ratioItem {
    margin-right: 5px;
}
</style>